/**
 * Created by hdw on 2017/5/16.
 */
import React, {Component} from 'react'
import {Link} from 'react-router'
import '../sass/Box'
import BoxDefaultBg from '../../global/components/BoxDefaultBg'
import LazyLoad from 'react-lazyload'
import {forceCheck} from 'react-lazyload'

export default class Box extends Component {
  constructor() {
    super()
  }

  render() {
    const {items, jumpTo} = this.props
    let imgHeight = `${(window.innerWidth - 30) / 2 / 1.23}px`
    let rightimgHeight = `${(window.innerWidth - 30) / 4 / 1.23}px`

    if (items.length) {
      return (
        <section className="home-box">
            {items[0] && <Link className="fl link" style={{display: 'block'}} onClick={items[0].link ? jumpTo.bind(this, items[0].link) : null}>
                <LazyLoad placeholder={<BoxDefaultBg/>}>
                    <img src={items[0].pictureUrl ? items[0].pictureUrl : require('../images/box0_default.png')} alt=""/>
                </LazyLoad>
            </Link>}
            <div className="fr">
                {items[1] && <Link className="link" style={{display: 'block'}} onClick={items[1].link ? jumpTo.bind(this, items[1].link) : null}>
                    <LazyLoad placeholder={<BoxDefaultBg/>}>
                        <img src={items[1].pictureUrl ? items[1].pictureUrl : require('../images/box1_default.png')} alt=""/>
                    </LazyLoad>
                </Link>}
                {items[2] && <Link className="link" style={{display: 'block'}} onClick={items[2].link ? jumpTo.bind(this, items[2].link) : null}>
                    <LazyLoad placeholder={<BoxDefaultBg/>}>
                        <img src={items[2].pictureUrl ? items[2].pictureUrl : require('../images/box1_default.png')} alt=""/>
                    </LazyLoad>
                </Link>}
            </div>
        </section>
      )
    } else {
      return (
        <section></section>
      )
    }
  }
}
